<!--  -->
<template>
<div>
    <div class="upload">
      <a-upload v-model:file-list="fileList" :accept="'.xlsx, .xls'" :before-upload="beforeUpload" :show-upload-list="false" :default-file-list="defaultFileList">
        <a style="margin-left: 10px" type="primary">批量导入门店Excel </a>
      </a-upload>
      <div v-for="(item, index) in fileNames" :key="index">{{ item }} <a-icon type="delete" @click="del()" /></div>
    </div>
     <a-table 
              :columns="storeColumns" 
              :data-source="storeData"
              :pagination="false"
              v-if="storeData.length>0"
              :bordered="true"
              >
      </a-table>
  </div>
</template>

<script>
import api  from "@/utils/taskapi.js"
import axios from "axios";
export default {
  props:{
    storeInfo:{
      type:Array,
      default:()=>[]
    }
  },
  created(){
    console.log(this.storeInfo);
    this.storeData=this.storeInfo
  },
  components: {},
  name: 'ComponentName',
  data() {
    return {
       storeColumns:[
      {
        title: '门店编号',
        dataIndex: 'code',
        key: 'code',
      }
     ],
     storeData:[],
     excelData: "",
      defaultFileList: [],
      fileList: [],
      fileNames: []
    }
  },
  methods:{
     del(){
      this.fileNames=[]
      this.excelData=[]
      this.storeData=[]
      this.sendChooseData()
    },
     //  向父组件发送数据
    sendChooseData() {
      this.$emit('chooseData', this.excelData)
    },
    beforeUpload(file){
      this.storeData=[]
      this.fileNames=[]
      console.log("before   ", file.name);
      this.fileNames.push(file.name)
      console.log(this.fileNames);
      console.log(this.excelData)
       if (
        file.type ==
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
        file.type == "application/vnd.ms-excel"
      ) {
      this.handleUpload(file)
      } else {
        this.$message.warning("文件格式错误，请重新上传！");
        this.del()
      }
       return false
    },
    async handleUpload(file) {
      console.log(file);
      // this.excelData=[]
      let formData = new FormData();
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      formData.append("file", file);
      // importStoreExcel
       axios
        .post(api.uploadStoreExecl, formData, config)
        .then((res) => {
          let listStr = res.data.data;
          console.log('list',listStr)
        this.excelData=listStr
        console.log(this.excelData);
      this.sendChooseData()
       if(this.excelData){
         let storeDatas=JSON.parse(this.excelData)
       storeDatas.forEach((item,index) => {
        this.storeData.push({key:index,code:item})
       });
       console.log(this.storeData);
       }
        });
    },
  },
}
</script>
<style>
.upload {
  display: inline-block;
}
.ant-upload-list-item-list-type-text{
  width: 400px !important;
}
</style>
